<script lang="ts" setup>
  import { Affix, Avatar, Card, Link } from '@arco-design/web-vue';
  import { ref } from 'vue';
  import type { ArticleRecord } from '../api/model/articleModel';
  import { queryRecommendArticleList } from '../api/recommend';

  const recommendArticleList = ref<ArticleRecord[]>([]);
  const getArticle = async () => {
    let res = await queryRecommendArticleList();
    recommendArticleList.value.splice(0, recommendArticleList.value.length, ...res);
  };
  getArticle();
</script>
<template>
  <Affix :offsetTop="90">
    <Card title="文章推荐" :bordered="false">
      <template #extra>
        <Link @click="getArticle"><IconSync /> 换一换</Link>
      </template>
      <div class="mb-[10px] w-full" v-for="(item, index) in recommendArticleList" :key="index">
        <a-space>
          <Avatar :size="25"><img :src="item.user_icon" /></Avatar>
          <div class="text-[#8A919F] text-[12px]"
            >{{ item.user_name }} {{ $timeAgo(item.updateTime) }}</div
          >
        </a-space>
        <div class="flex justify-between content-center">
          <div>
            <a-typography-paragraph
              type="secondary"
              class="text-[17181A]"
              :ellipsis="{
                rows: 2,
                showTooltip: false,
                css: false,
              }"
            >
              {{ item.title }}
            </a-typography-paragraph>
            <div class="text-[#8A919F] text-[12px]"
              >{{ item.likes }}赞 · {{ item.comment_count }}评论 · {{ item.favorites }}收藏</div
            >
          </div>
          <img v-if="item?.cover" class="w-[64px] h-[64px] rounded-[4px]" :src="item.cover" />
        </div>
      </div>
    </Card>
  </Affix>
</template>
